<template>
  <div class="">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>子系统</el-breadcrumb-item>
            <el-breadcrumb-item>子系统首页</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <template>
      <el-table :data="this.tableData" border style="width: 100%">
        <el-table-column prop="name" label="NAME">
        </el-table-column>
        <el-table-column prop="time" label="TIME">
        </el-table-column>
        <el-table-column prop="license" label="LICENSES FAULT STATUS">
          <template scope="scope">
            <a class="link" @click="getDetail(scope.row.name)">{{scope.row.license.handle}}</a>
            <span :class="scope.row.license.status=='OK'?'OK':'Fail'">{{scope.row.license.status}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="child" label="CHILD FAULT STATUS">
          <template scope="scope">
            <span :class="scope.row.child=='OK'?'OK':'Fail'">{{scope.row.child}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dwell" label="LOCATE DWELL TIME">
        </el-table-column>
        <el-table-column prop="timeout" label="FAST TIMEOUT">
          <template scope="scope">
            <input type="checkbox" v-model="scope.row.timeout">
          </template>
        </el-table-column>
        <el-table-column prop="verify" label="VERITY POLICY">
        </el-table-column>
        <el-table-column prop="encrypt" label="ENCRYPT PD POLICY">
        </el-table-column>
        <el-table-column prop="sfxEnabled" label="SFX ENABLED">
          <template scope="scope">
            <input type="checkbox" v-model="scope.row.sfxEnabled">
          </template>
        </el-table-column>
        <el-table-column prop="uId" label="UUID">
        </el-table-column>
        <el-table-column prop="users" label="USERS">
        </el-table-column>
      </el-table>
    </template>
  </div>

</template>
<script>
  //  import store from '../../store'
  export default {
    name: 'subsystem_close',
    data () {
      return {
        tableData: [{
          name: 'DEFAULT',
          time: 'Thu Apr 13 10:45:24 2017',
          license: {
            handle: 'Add Key',
            status: 'OK'
          },
          child: 'OK',
          dwell: '120 seconds',
          timeout: true,
          verify: 'Enabled',
          encrypt: 'No Policy',
          sfxEnabled: false,
          uId: '60000100f000s52sdd000001222010020',
          users: 2
        }],
        form: {
          name: '222',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '100px'
      }
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogFormVisible = false
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">


</style>
